iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 14
0

身為前端工程師,除了要實作功能互動以外,還有很重要的就是視覺上的呈現。

在前期的開發階段,為了盡量讓產品的原型看起來有感覺一點,通常前端工程師自己就要先懂一些配色,讓頁面看起來不至於太醜;到了後期 UI Designer 的加入,我們要做的則是可以把顏色的設定能精準到位。

因此,今天就來認識五個各種情境下好用的色彩工具吧!

ColorPick Eyedropper

  • 類型:chrome 擴充功能
  • 簡介:針對網頁的所有元素,可以放大檢視,並任意點擊取得錨點,就能獲得錨點處的色碼。
  • 推薦理由:Designer 給初步的設計稿時,可以直接同步設計稿的顏色設定,或是想從圖片中汲取顏色時非常方便。
  • 商店連結
    img

colorize

  • 類型:VSCode 外掛
  • 簡介:在 CSS 中,在任何形式的顏色設定的色碼上,都可以背景色顯示在編輯頁面中。
  • 推薦理由:一目了然看顏色是否有設定對
  • 市集連結
    gif

Google

  • 類型:網站
  • 簡介:直接以顏色設定的 CSS 作為關鍵字搜尋,在 Google 搜尋結果上就會出現各種形式的設定還有調色盤
  • 推薦理由:快速查看顏色以及各種形式的設定
  • 範例連結

Imgur

Canva Color Palette Generator

  • 類型:網站
  • 簡介:可以透過圖片取得各種的主題色配置系列,可以自己上傳圖片取得,也可以直接從裡面非常多張的樣板配置取得。個人覺得是個非常厲害的應用。
  • 推薦理由:可以直接以形象圖來取得各種顏色的配置,不用再挑色挑半天。
  • 網站連結

Imgur

EggGradients

  • 類型:網站
  • 簡介:用很可愛的蛋形呈現 200 多種以上的漸層色配置,並且跟會根據每年設計趨勢來做調整。
  • 推薦理由:可以根據色系來選各種美美漸層色,而且可一鍵複製 CSS 設定。
  • 網站連結

Imgur

.xxxx {
  /*複製的設定*/
  background-color: #a40606;
  background-image: linear-gradient(315deg, #a40606 0%, #d98324 74%);
}

上一篇
[Day13] 瀏覽器開發工具 - 自行開發篇
下一篇
[Day15] 十大 CSS 樣式產生器
系列文
前端工程師不能不知道的生產力工具30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言